<template>
  <div class="view-box info-box">
    <info-title title="角色信息" icon="el-icon-s-custom"></info-title>
    <div class="info-content">
      <div class="search-box">
        <el-button type="primary" size="small" @click="addRoleDialog"
          >新增</el-button
        >
        <el-button type="success" size="small" @click="exportUser"
          >导出</el-button
        >
      </div>
      <!-- 表格 -->
      <el-table
        class="user-table"
        size="small"
        :data="tableData"
        stripe
        :header-cell-style="{ background: '#F5F7FA', color: '#606266' }"
        border
        height="90%"
      >
        <el-table-column prop="name" label="角色名称"></el-table-column>
        <el-table-column prop="desc" label="角色描述"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag type="success" size="small" v-if="scope.row.status == '0'"
              >正常</el-tag
            >
            <el-tag type="danger" size="small" v-if="scope.row.status == '1'"
              >禁用</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="updateClick(scope.row)" type="text" size="small"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="updateStatus(scope.row)"
              :style="{
                color: scope.row.status == '0' ? '#f56c6c' : '#67c23a',
              }"
              >{{ scope.row.status == "0" ? "禁用" : "启用" }}</el-button
            >
            <el-button
              @click="deleteClick(scope.row)"
              type="text"
              style="color: #f56c6c"
              >删除</el-button
            >
            <el-button type="text" size="small" @click="showDialog(scope.row)"
              >分配权限</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="table-page">
        <el-pagination
          :total="10"
          background
          layout="total,prev, pager, next"
        ></el-pagination>
      </div>
    </div>
    <!-- 权限信息弹出框 -->
    <info-dialog
      :title="infoDialog.title"
      :show="infoDialog.show"
      @on-close="infoDialog.show = false"
    >
      <info-access
        v-if="infoDialog.show "
        :roleId="currentRoleId"
        @close="infoDialog.show = false"
      ></info-access>
    </info-dialog>
  </div>
</template>

<script>
// 导入标题组件
import infoTitle from "../../../../components/common/info-title";
import infoDialog from "../../../../components/common/info-dialog";

import { getRoles, addRole, deletRole, updateRole } from "../../../../api/role";
import InfoDialog from "../../../../components/common/info-dialog.vue";
import infoAccess from "./infoAccess";
export default {
  inject: ["reload"],
  data() {
    return {
      form: {},
      tableData: [],
      dialogFormVisible: false,
      formLabelWidth: "120px",
      // 弹窗信息
      infoDialog: {
        title: "权限信息",
        show: false,
      },
      //当前选中的角色id
      currentRoleId: null,
    };
  },
  components: { infoTitle, infoDialog, infoAccess },
  mounted() {
    getRoles()
      .then((res) => {
        this.tableData = res.data;
      })
      .catch((err) => {});
  },
  methods: {
    //   进入角色添加页面
    addRoleDialog() {
      this.$router.push({
        path: "/system/role_ae",
      });
    },
    //修改的点击事件
    updateClick(data) {
      this.$router.push({
        name: "role_ae",
        params: data,
      });
    },
    // 数据删除操作
    deleteClick(data) {
      deletRole(data.id).then((res) => {
        if (res.success == true) this.reload();
      });
    },
    updateStatus(data) {
      console.log("用户状态更改", data);
      if (data.status == "0") {
        data.status = 1;
      } else {
        data.status = 0;
      }
      updateRole(data).then((res) => {
        this.$message({
          message: "角色状态更改成功",
          type: "success",
          offset: 70,
        });
        this.reload();
      });
    },
    exportUser() {},
    showDialog(data) {
      this.currentRoleId = data.id;
      this.infoDialog.show = true;
    },
  },
};
</script>

<style scoped>
.view-box {
  padding: 10px;
}
.info-content {
  overflow-y: auto;
  padding: 0.5rem;
}
.user-table {
  height: 100%;
  overflow-y: auto;
}
.search-box {
  margin: 0rem 0.5rem 0.5rem 0.5rem;
  text-align: right;
}
.table-page {
  margin: 0.5rem -5px 0rem 0rem;
  text-align: right;
}
</style>